<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Propsage Tutorial</title>
<script type="text/javascript" charset="utf-8" src="filter/jquery-1.7.min.js"></script>
</head>
<body>
<h1>Propsage Tutorial</h1>
<input id="filter_input" placeholder="Type to filter" />
<p>Showing <span class="num_displayed"></span> tutorial:</p>
<ul id="list_to_filter">
</ul>
<script type="text/javascript" charset="utf-8" src="filter/jquery.fastLiveFilter.js"></script>
<script type="text/javascript" charset="utf-8" src="filter/data.js"></script>
<script type="text/javascript" charset="utf-8">
//<![CDATA[

	function addCommas(num) {
		num = String(num);
		var rgx = /(\d+)(\d{3})/;
		while (rgx.test(num)) {
			num = num.replace(rgx, '$1' + ',' + '$2');
		}
		return num;
	}
	
	$(function() {
		// Copy the data into the display (reusing the dataset from the comparison page
		// here... probably should do something less intense?)
		var lists = $('#list_to_filter');
		for (i in data)
		{
			movieTitle = data[i];
			lists.append('<li><a href="http://www.imdb.com/title/' + i + '/">' + movieTitle + '</a></li>');
		}
		
		// Activate fastLiveFilter w/ callback
		var numDisplayed = $(".num_displayed");
		$("#filter_input").fastLiveFilter("#list_to_filter", {
			callback: function(total) { numDisplayed.html(addCommas(total)); },
		});
	});
	
//]]>
</script>
</body>
</html>
